<template>
    <div id="app">
      <div class="demo-infinite-container">
        <router-view></router-view>
      </div>
        <mu-bottom-nav style="position:absolute;width:100%;height:60px;left:0px;bottom:0px;z-index:10000;" :value="bottomNav" @change="handleChange">
            <mu-bottom-nav-item v-for="(nav,i) in navs" :key="i" :value="nav.name" :to="{name:nav.name}" :title="nav.text"
                                :icon="nav.icon"/>
        </mu-bottom-nav>
    </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      bottomNav: "Index",
      navs: [
        {
          to: "/",
          icon: "home",
          text: "首页",
          name: "Index"
        },
        {
          to: "/classify",
          icon: "widgets",
          text: "分类",
          name: "Classify"
        },
        {
          to: "/find",
          icon: "visibility",
          text: "发现",
          name: "Find"
        },
        {
          to: "/my",
          icon: "people",
          text: "我的",
          name: "My"
        }
      ]
    };
  },
  computed: {
    fullscreenLoading() {
      return this.$store.state.isLoad;
    }
  },
  mounted() {
    //      console.log(this.$route);
    this.bottomNav = this.$route.name;
    //模拟用户登录操作
    this.$store.dispatch("doLogin");
  },
  methods: {
    handleChange(val) {
      this.bottomNav = val;
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  overflow: hidden;
  margin-bottom: 60px;
}
.demo-infinite-container {
  width: 100%;
  height: 100%;
  margin-top: 64px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 60px;
}

.mu-appbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 1000;
  text-align: center;
}

/* .mu-appbar {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1000;
        text-align: center;
    } */
</style>
